<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue的生命周期</title>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p id="mm">{{message}}</p>
      <input type="text" v-model="message" />
      <p v-for="(user,index) in userList" :key="index">
        {{user.name}}--{{user.age}}--{{user.sex}}
      </p>
    </div>
  </body>
</html>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      message: "hello world",
      userList: [],
    },
    methods: {
      //获取数据列表
      getList() {
        this.userList = [
          { name: "张三", age: 18, sex: "男" },
          { name: "李四", age: 18, sex: "男" },
          { name: "王五", age: 18, sex: "男" },
          { name: "卡卡西", age: 18, sex: "男" },
          { name: "迪迦", age: 18, sex: "男" },
        ];
      },
    },

    beforeCreate: function () {
      console.log("beforeCreate:生命周期中第一个函数");
      console.log(this.message);
    },
    created: function () {
      console.log("created:生命周期中第二个函数");
      console.log(this.message);
      this.getList();
    },
    beforeMount: function () {
      console.log("beforeMount:生命周期中第三个函数");
      console.log(document.getElementById("mm").innerText);
    },
    mounted: function () {
      console.log("mounted:生命周期中第四个函数");
      console.log(document.getElementById("mm").innerText);
    },
    beforeUpdate: function () {
      console.log(
        "beforeUpdate:生命周期中第五个函数,该函数是data中数据发生变化时执行" +
        "这个事件执行时仅仅是Vue实例中data数据变化页面显示的依然是原始数据"
      );
      console.log(document.getElementById("mm").innerText);
    },
    updated: function () {
      console.log(
        "updated:生命周期中第六个函数,该函数是data中数据发生变化时执行" +
        "这个事件执行时Vue实例中data数据已经变化页面显示的已经变化"
      );
      console.log(document.getElementById("mm").innerText);
    },
  });
</script>
